<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="系统" name="first">
      
<el-form ref="form" :model="profileForm" label-width="200px">

  <el-form-item label="deviceID">
    <el-input placeholder="deviceID" v-model="globalData.deviceID"></el-input>
  </el-form-item>
  <el-form-item label="host">
    <el-input placeholder="host" v-model="globalData.host"></el-input>
  </el-form-item>
  <el-form-item label="hostName">
    <el-input placeholder="hostName" v-model="globalData.hostName"></el-input>
  </el-form-item>
  <el-form-item label="timezone">
    <el-input placeholder="timezone" v-model="globalData.timezone"></el-input>
  </el-form-item>
  <el-form-item label="upgradeHost">
    <el-input placeholder="upgradeHost" v-model="globalData.upgradeHost"></el-input>
  </el-form-item>
  <el-form-item label="openctp">
    <el-input placeholder="openctp" v-model="globalData.openctp"></el-input>
  </el-form-item>
  <el-form-item label="version">
    <span>{{globalData.version}}</span>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onProfileBaseSubmit">确认</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

    </el-tab-pane>
    <el-tab-pane label="应用" name="application">      
      
    <el-table
      key="applicationFormTable"
      :data="applicationList"
      border
      fit
      highlight-current-row
      height="620"
      style="width: 100%;"
    >
      <el-table-column label="应用" width="230px">
        <template slot-scope="{row}">
          <el-input placeholder="appCode" v-model="row.appCode"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="应用">
        <template slot-scope="{row}">
          <el-input placeholder="appName" v-model="row.appName"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="包" width="300px">
        <template slot-scope="{row}">
          <el-input placeholder="appPackage" v-model="row.appPackage"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="版本" width="100px">
        <template slot-scope="{row}">
          <el-input placeholder="appVersion" v-model="row.appVersion"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="200px">
        <template slot-scope="{row}">
          <el-radio-group v-model="row.appStatus">
          <el-radio :label="2">开启</el-radio>
          <el-radio :label="1">关闭</el-radio>
        </el-radio-group>
        </template>
      </el-table-column>
    </el-table>
          <el-button @click="handleApplicationJoin()">
            新应用
          </el-button>
    <el-button type="primary" @click="onSubscribeSubmit">确认</el-button>

    </el-tab-pane>
    <el-tab-pane label="合约" name="sixty">      
      <el-row style="padding:20px;">
        <el-col :span="8" v-for="(subscribe, index) in subscribeList" :key="index" style="margin-right:20px; margin-bottom:20px; width:300px;" >
          <el-card :body-style="{ padding: '10px' }">
            <img :src="subscribe.cover" class="image">
            <div>
              周期
          <el-select v-model="subscribe.scale">
            <el-option :label="1">1分钟</el-option>
            <el-option :label="3">3分钟</el-option>
            <el-option :label="5">5分钟</el-option>
            <el-option :label="15">15分钟</el-option>
            <el-option :label="30">30分钟</el-option>
            <el-option :label="60">60分钟</el-option>
            <el-option :label="1440">日线</el-option>
            <el-option :label="7200">周线</el-option>
            <el-option :label="28800">月线</el-option>
          </el-select>
            </div>
            <div>
              策略周期
          <el-select v-model="subscribe.policyScale">
            <el-option :label="1">1分钟</el-option>
            <el-option :label="3">3分钟</el-option>
            <el-option :label="5">5分钟</el-option>
            <el-option :label="15">15分钟</el-option>
            <el-option :label="30">30分钟</el-option>
            <el-option :label="60">60分钟</el-option>
            <el-option :label="1440">日线</el-option>
            <el-option :label="7200">周线</el-option>
            <el-option :label="28800">月线</el-option>
          </el-select>
            </div>
            <div>
              交易
                <el-radio-group v-model="subscribe.trade">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </div>
            <div style="padding: 14px;">
              <span>{{subscribe.title}}【{{subscribe.code}}】</span>
              <div class="bottom clearfix">
                <el-button v-if="subscribeData.hasOwnProperty(subscribe.code) == true" type="text" class="button" @click="handleSubscribeDelete(subscribe)">取消订阅</el-button>
                <el-button v-else type="text" class="button" @click="handleSubscribeDelete(subscribe)">订阅</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
          <el-button @click="handleSubscribeJoin()">
            新合约
          </el-button>
    <el-button type="primary" @click="onSubscribeSubmit">确认</el-button>

    </el-tab-pane>
    <el-tab-pane label="文件" name="second">      
<el-form ref="form" :model="profileForm" label-width="200px">
  <el-form-item label="appKey">
    <el-input placeholder="appKey" v-model="tencentData.appKey"></el-input>
  </el-form-item>
  <el-form-item label="appSecret">
    <el-input placeholder="appSecret" v-model="tencentData.appSecret"></el-input>
  </el-form-item>
  <el-form-item label="bucket">
    <el-input placeholder="bucket" v-model="tencentData.bucket"></el-input>
  </el-form-item>
  <el-form-item label="region">
    <el-input placeholder="region" v-model="tencentData.region"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onCloudFileSubmit">确认</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

    </el-tab-pane>
    <el-tab-pane label="指标" name="third">
      
<el-form ref="form" :model="profileForm" label-width="200px">
<el-collapse v-model="targetNames" accordion>
  <el-collapse-item title="趋势追踪" name="1">
    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
  </el-collapse-item>
  <el-collapse-item title="震荡随机摆动【kdj】" name="2">
  <el-form-item label="快线">
    <el-input v-model="stochasticData.fast"></el-input>
  </el-form-item>
  <el-form-item label="慢线">
    <el-input v-model="stochasticData.slow"></el-input>
  </el-form-item>
  <el-form-item label="信号线">
    <el-input v-model="stochasticData.signal"></el-input>
  </el-form-item>
  </el-collapse-item>
  <el-collapse-item title="短期趋势" name="3">
  <el-form-item label="生命线WMA">
    <el-input v-model="trendData.ema"></el-input>
  </el-form-item>
  <el-form-item label="支撑线WMA">
    <el-input v-model="trendData.wma"></el-input>
  </el-form-item>
  </el-collapse-item>
  <el-collapse-item title="长期趋势" name="4">
  <el-form-item label="生命线SMA">
    <el-input v-model="trendData.sma"></el-input>
  </el-form-item>
  <el-form-item label="支撑线SWMA">
    <el-input v-model="trendData.swma"></el-input>
  </el-form-item>
  </el-collapse-item>
</el-collapse>

  <el-form-item>
    <el-button type="primary" @click="onPolicySubmit">确认</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

    </el-tab-pane>
    <el-tab-pane label="经纪商" name="fourth">
      
<el-form ref="form" :model="profileForm" label-width="200px">

  <el-form-item label="appId">
    <el-input placeholder="appId" v-model="brokerData.appId"></el-input>
  </el-form-item>

  <el-form-item label="authCode">
    <el-input placeholder="authCode" v-model="brokerData.authCode"></el-input>
  </el-form-item>

  <el-form-item label="brokerId">
    <el-input placeholder="brokerId" v-model="brokerData.brokerId"></el-input>
  </el-form-item>

  <el-form-item label="hosts">
    <el-input placeholder="hosts" v-model="brokerData.hosts"></el-input>
  </el-form-item>

  <el-form-item label="tradeHost">
    <el-input placeholder="tradeHost" v-model="brokerData.tradeHost"></el-input>
  </el-form-item>

  <el-form-item label="账户密码">
    <el-input placeholder="passpord" show-password v-model="brokerData.passpord"></el-input>
  </el-form-item>

  <el-form-item label="资金密码">
    <el-input placeholder="bankPassword" show-password v-model="brokerData.bankPassword"></el-input>
  </el-form-item>

  <el-form-item label="取款密码">
    <el-input placeholder="fundPassword" show-password v-model="brokerData.fundPassword"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onBrokerSubmit">确认</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
//import { getFaultinessList,  removeFaultinessByID, changeFaultinessStatusByID } from '@/api/development/faultiness'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getHost} from '@/utils/socket' // secondary package based on el-pagination
import {getSymbolList} from '@/api/knowledge/futures' // secondary package based on el-pagination

export default {
  name: 'faultinessAdmin',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      socket:"",
      connected:"loading",
      globalData:{},
      brokerData:{},
      trendData:{},
      tencentData:{},
      applicationList:[],
      subscribeList:[],
      subscribeData:{},
      futuresList:[

      ],
      stochasticData:{
        fast:0,
        slow:0,
        signal:0
      },
      profileForm:{},
      profileData:{},
      targetNames:['1'],
      activeName: 'second'
    }
  },
  created() {
    this.init()
    /*
    let _this = this
    getSymbolList({
      "perpage":100
    }).then(res=>{
      console.log("test",res)
      if(res.status == 200){
        _this.subscribeList = res.data.list
        _this.subscribeList.forEach((res,index)=>{
          res.code = String(res.code).toUpperCase();
          _this.subscribeList[index] = res
        })
      }
    })
    */
  },
  destroyed(){
    this.close()
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    init: function () {
      if(typeof(WebSocket) === "undefined"){
          alert("您的浏览器不支持socket")
      }else{
          // 实例化socket
          this.socket = new WebSocket(getHost())
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
      }
    },
    open: function () {

        this.connected = 'loaded'

        this.getList()
    },
    error: function (e) {
        console.log("连接错误",JSON.stringify(e))
    },
    refreshSymbol:function(){
      
      this.send({
        "conversationType":"quotation.market.symbol",
        "sender":{},
        "message":formData,
        "target":{
          "id":12332,
          "name":""
        }
      })

    },
    getMessage: function (receiveData) {
      receiveData = JSON.parse(receiveData.data)
        console.log(receiveData)
      if(receiveData.status != 200){
          console.log(receiveData.msg)
      }else{
        receiveData = receiveData.data
        this.profileData = receiveData

        this.stochasticData = receiveData.policy.stochastic
        this.subscribeList = receiveData.policy.subscribe
        let _this = this;
        _this.subscribeList.forEach((res,index)=>{
          let scales = res.scale
          for(let i in scales){
            scales[i] = String(scales[i])
          }
          res.scale = scales
          if(res.policyScale == undefined){
            res.policyScale = 1

          }
          console.log(res)
          _this.subscribeList[index] = res
          res.symbol = String(res.symbol).toUpperCase();
          _this.subscribeData[res.symbol] = res
        })
        this.applicationList = receiveData.program
        _this.applicationList.forEach((res,index)=>{
          res["appStatus"] = Number(res['appStatus'])
          _this.applicationList[index] = res
        })
        console.log(this.applicationList)
        this.trendData = receiveData.policy.trend
        this.tencentData = receiveData.tencent
        this.brokerData = receiveData.broker
        this.brokerTradeData = receiveData.brokerTrade
        this.aesData = receiveData.aes
        this.messengerData = receiveData.messenger
        this.globalData = receiveData.global
      }

    },
    send: function (params) {
      params = JSON.stringify(params)
      this.socket.send(params)
    },
    close: function () {
        console.log("socket已经关闭")
    },
    handleApplicationJoin:function(){
      this.applicationList.push({
        appCode:"",
        appName:"",
        appTotal:1,
        appStatus:1,
        appPackage:"",
        appVersion:"0.0.0"
      })
    },
    handleSubscribeDelete:function(row){
      let _this = this;
      _this.subscribeList.forEach((res,index)=>{
        if(res.symbol == row.symbol){
            _this.subscribeList.splice(index,1)
        }
      })
    },
    handleSubscribeJoin:function(){
      this.subscribeList.push({
        symbol:"",
        allowed:0,
        expireTime:0,
        scale:["1"],
        policyScale:"1"
      })
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    },
    getList:function(){
      this.send({
        "conversationType":"foundation.profile.detail",
        "message":{},
        "target":{"id":"3"}
      })
    },
    onSubscribeSubmit:function(){
      let formData = this.profileData

      formData['program'] = this.applicationList
      formData['policy']['stochastic'] = this.stochasticData
      formData['policy']['trend'] = this.trendData
      formData['policy']['subscribe'] = this.subscribeList
      formData['tencent'] = this.tencentData
      formData['broker'] = this.brokerData
      formData['aes'] = this.aesData
      formData['messenger'] = this.messengerData
      formData['global'] = this.globalData
      
      this.send({
        "conversationType":"foundation.profile.save",
        "sender":{},
        "message":formData,
        "target":{
          "id":12332,
          "name":""
        }
      })
    },
    onBrokerSubmit:function(){
      let formData = this.profileData

      formData['policy']['stochastic'] = this.stochasticData
      formData['policy']['trend'] = this.trendData
      formData['policy']['subscribe'] = this.subscribeList
      formData['tencent'] = this.tencentData
      formData['broker'] = this.brokerData
      formData['aes'] = this.aesData
      formData['messenger'] = this.messengerData
      formData['global'] = this.globalData
      
      this.send({
        "conversationType":"foundation.profile.save",
        "sender":{},
        "message":formData,
        "target":{
          "id":12332,
          "name":""
        }
      })
    },
    onCloudFileSubmit:function(){
      let formData = this.profileData

      formData['policy']['stochastic'] = this.stochasticData
      formData['policy']['trend'] = this.trendData
      formData['policy']['subscribe'] = this.subscribeList
      formData['tencent'] = this.tencentData
      formData['broker'] = this.brokerData
      formData['aes'] = this.aesData
      formData['messenger'] = this.messengerData
      formData['global'] = this.globalData
      
      this.send({
        "conversationType":"foundation.profile.save",
        "sender":{},
        "message":formData,
        "target":{
          "id":12332,
          "name":""
        }
      })
    },
    onPolicySubmit:function(){
      let formData = this.profileData

      formData['policy']['stochastic'] = this.stochasticData
      formData['policy']['trend'] = this.trendData
      formData['policy']['subscribe'] = this.subscribeList
      formData['tencent'] = this.tencentData
      formData['broker'] = this.brokerData
      formData['aes'] = this.aesData
      formData['messenger'] = this.messengerData
      formData['global'] = this.globalData
      
      this.send({
        "conversationType":"foundation.profile.save",
        "sender":{},
        "message":formData,
        "target":{
          "id":12332,
          "name":""
        }
      })
    },
    onProfileBaseSubmit:function(){
      let formData = this.profileData

      formData['policy']['stochastic'] = this.stochasticData
      formData['policy']['trend'] = this.trendData
      formData['policy']['subscribe'] = this.subscribeList
      formData['tencent'] = this.tencentData
      formData['broker'] = this.brokerData
      formData['aes'] = this.aesData
      formData['messenger'] = this.messengerData
      formData['global'] = this.globalData
      
      this.send({
        "conversationType":"foundation.profile.save",
        "sender":{},
        "message":formData,
        "target":{
          "id":12332,
          "name":""
        }
      })
    },
    onProfileSubmit:function(){
      let formData = this.profileData

      formData['policy']['stochastic'] = this.stochasticData
      formData['policy']['trend'] = this.trendData
      formData['policy']['subscribe'] = this.subscribeList
      formData['tencent'] = this.tencentData
      formData['broker'] = this.brokerData
      formData['aes'] = this.aesData
      formData['messenger'] = this.messengerData
      formData['global'] = this.globalData
      
      this.send({
        "conversationType":"foundation.profileSave.getList",
        "sender":{},
        "message":formData,
        "target":{
          "id":12332,
          "name":""
        }
      })
    }
  }
}
</script>
<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 160px;
    margin-bottom: 10px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>